﻿@{
    Layout = "_User";
    ViewData["Title"] = "Admin - Login";
}

@section css {

    <!-- Custom fonts for this template-->
    <link href="~/node_modules/startbootstrap-sb-admin/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template-->
    <link href="~/node_modules/startbootstrap-sb-admin/css/sb-admin.css" rel="stylesheet">

    <link href="~/node_modules/toastr/build/toastr.css" rel="stylesheet" />
    <style>
        .card-login {
            max-width: 25rem;
        }

        .ml-auto, .mx-auto {
            margin-left: auto !important;
        }

        .mr-auto, .mx-auto {
            margin-right: auto !important;
        }

        .mt-5, .my-5 {
            margin-top: 10rem !important;
        }
    </style>
}
<body class="bg-dark">
    <div class="container">
        <div class="card card-login mx-auto mt-5">
            <div class="card-header">用户登录</div>
            <div class="card-body">
                <div class="form-group">
                    <div class="form-label-group">
                        <input type="text" id="inputName" class="form-control" placeholder="Name" required="required" autofocus="autofocus">
                        <label for="inputName">用户名称</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-label-group">
                        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="required">
                        <label for="inputPassword">用户密码</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-label-group">
                        <div class="form-label-group">
                            <div class="verify-wrap" id="verify-wrap"></div>
                        </div>
                    </div>
                </div>

                @*<div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="remember-me"> 记住密码
                            </label>
                        </div>
                    </div>*@
                <a id="Btnlogin" class="btn btn-primary btn-block" href="javascript:">登录</a>
                <div class="text-center">
                    <a class="d-block small mt-3" href="/Home/Register"></a>
                </div>
            </div>
        </div>
    </div>
</body>
@section javascript {

    <!-- Bootstrap core JavaScript-->
    <script src="~/node_modules/startbootstrap-sb-admin/vendor/jquery/jquery.min.js"></script>
    <script src="~/node_modules/startbootstrap-sb-admin/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="~/node_modules/startbootstrap-sb-admin/vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- toastr JavaScript-->
    <script src="~/node_modules/toastr/toastr.js"></script>

    <script src="~/js/slideVerify.js"></script>

    <script type="text/javascript">
    </script>
    <script>
        $(function () {
            toastr.options = {
                closeButton: false,
                debug: false,
                progressBar: true,
                positionClass: "toast-top-right ",
                onclick: null,
                showDuration: "300",
                hideDuration: "1000",
                timeOut: "2000",
                extendedTimeOut: "1000",
                showEasing: "swing",
                hideEasing: "linear",
                showMethod: "fadeIn",
            };

        });
        var verify = false;

        var SlideVerifyPlug = window.slideVerifyPlug;
        var slideVerify = new SlideVerifyPlug('#verify-wrap', {
            wrapWidth: '100%',
            initText: '请向右滑动滑块',
            sucessText: '验证通过',
            getSuccessState: function (res) {
                verify = res;
            }
        });

        $('#Btnlogin').click(function () {
            if ($('#inputName').val() == "" || $('#inputPassword').val() == "") {
                toastr.error("账号密码不能为空!"); return;
            } else if (!verify) {
                toastr.error("请滑动验证!"); return;
            }
            $.ajax({
                type: 'post',
                url: '/api/Login/',
                headers: { 'Authorization': 'Bearer ' + localStorage.token },
                contentType: 'application/json',
                data: JSON.stringify({ "Name": $('#inputName').val(), "Pwd": $('#inputPassword').val() }),
                datatype: 'json',
                success: function (res) {
                    if (res.success) {
                        localStorage.setItem("token", res.access_token);
                        location.href = "/Power/Main/";
                    }
                    else {
                        toastr.error(res.message);
                        verify = false;
                        slideVerify.resetVerify();
                    }
                },
                error: function (e) {
                    toastr.error(e.responseText);
                }
            });
        });
    </script>

}